import {useEffect,useState} from "react";
import { Modal,NavBar,Icon,WingBlank,WhiteSpace,InputItem,Button } from "antd-mobile"
import {RouteComponentProps}  from "react-router-dom"

import "./index.less"

// 解构
const {alert} = Modal;
interface Props extends RouteComponentProps{}

// z正侧
const phoneReg =/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/

 function PhoneRegister(props: Props) {
  const [hasError, setHasError] = useState<boolean>(false);
  const [isFirstView, setIsFirstView] = useState<boolean>(true);
  // 通过stste拿到手机号的vaule
  const [phone,setPhone]= useState<string>('');
  const {history,location} =props
  // 获取路由state参数
  // unknow类型使用时必须进行断言
  const code: unknown = location.state || "+86";
// useEffect是用来使用生命周期函数的
// 当第二个参数传入空数组，就相当于componentDidMount
useEffect(()=>{
  // 如果是选择国家后进入的，不要在重新显示了
  if (location.state) return;

    alert("注册协议及隐私政策",
    <span className="konw">
        在您注册成为硅谷用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
        {/* strong加粗 */}
        <strong className="read">
        请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）
        </strong>
        <span className="rule">《硅谷用户注册协议》</span>
        <span className="rule">《硅谷隐私政策》</span>
    </span>,

    [
        { text: '不同意',
         onPress: () => {
            //  返回上一级页面
            props.history.push("./phoneLogin")
         } 
        },
        { 
            text: '同意', 
            style:{
                backgroundColor: "red",
                color: "#fff",
            }
         },
      ])
},[])

// 设置对应的触摸事件,没有参数以及返回值，所以我们不做对应ts处理
const goCountryPicker=()=>{
  // 点击的时候跳转到指定的页面
  history.push("/countryPicker")
}

// 表单校验的方法
const handleInputChange =(val:string )=>{
  if(phoneReg.test(val)){
    setHasError(false);
  }else{
    setHasError(true)
  }
  setIsFirstView(false)
}

// 点击下一步事件，弹框发送验证码
const goCodeRegister = () =>{
  alert("",`我们将发送短信/语音验证码至：${phone}`,[
    {
      text: "不同意",
    },
    {
      text: "同意",
      onPress: () => history.push("/codeRegister", phone),
      style: {
        backgroundColor: "red",
        color: "#fff",
      },
    },
  ])
}

  return (
    <div className="container">
    <NavBar
    mode="light"
    icon={<Icon className="left-icon" type="left" />}
    onLeftClick={() => props.history.push("./phoneLogin")}>
        硅谷注册
  </NavBar>
  {/* 两翼留白以及上下留白 */}
  <WingBlank size="lg">
    <WhiteSpace size="xl" />
        <InputItem error={hasError} onChange={handleInputChange} placeholder="请输入手机号" clear  className="phone-register-input">
          {/* 如果是antd-mobile的组件，组件要求绑定的事件都是需要根据文档规定的 */}
          <div className="phone-prefix" onTouchEnd={goCountryPicker}>
            <span>{code as string}</span>
            <Icon className="left-icon" type="down" />
          </div>
        </InputItem>
        {<span className="error-msg">{hasError && "手机号不合法"}</span>}
        <WhiteSpace size="xl" />
        {/* 因为要给按钮设置居中，所以需要包裹一层div */}
        <div className="next-btn">
          <Button type="warning" className="btn"  onClick={goCodeRegister} disabled={isFirstView || hasError} >
          下一步
          </Button>
        </div>
   
  </WingBlank>
    </div>
  );
}
export default PhoneRegister;
